<template>
	<div class="banner">
		<swiper :options="swiperOption">
			<!-- <swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide>
			<p class="swiper-pagination" slot="pagination"></p> -->
			<swiper-slide v-for="item in message">
				<a :href="item.link">
					<img :src="item.img" alt="">
				</a>
			</swiper-slide>
			<p class="swiper-pagination" slot="pagination"></p>
		</swiper>
	</div>
</template>


<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import axios from 'axios';
import global from '../../utils/global'
import store from '../../utils/store'
export default {
	data(){
		return {
			swiperOption: {
				// autoplay:true,　　　　　
				autoplay:{
					delay: 5000,
					stopOnLastSlide: false,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination'//分页器
				}
			},
			swiperSlides: [],
			message:[],
		}
	},
	components: {
		swiper,
		swiperSlide
	},
	mounted(){
		this.getInfo();
	},
	methods:{
		getInfo(index){
      var that = this;
      axios.get(global.api.index.banner,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("getBanner then");
        console.log(res);
        that.message = res.data.data;
      })
      .catch(function(res){
        console.log("getBanner catch");
        console.log(res);
      }) 
    },
	}
}
</script>

<style scoped>
	.banner { 
		margin: 0 0 0.4rem 0;
		padding: 0;
		/*height: 11.5rem;*/
		overflow: hidden;
	}
	.swiper-container{
		width: 100%;
		/*height: 100%;*/
	}
  .swiper-wrapper{

  }
  .swiper-slide{
    /*border: 1px solid blue;*/
  }
  .swiper-slide a {
    width: 100%;
    /*border: 1px solid yellow;*/
  }
	.banner img {
		width: 100%;
		/*height: 100%;*/
    /*border: 1px solid red;*/
	}
	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
		/*bottom: 0rem;*/
	}
</style>
